<template>
    <div class="order">
        <van-cell-group>
            <van-cell v-if="checkedAddress" isLink @click="goAddressList()" title="收货地址">
                <div slot="label">
                    <div>
                        <span>{{ checkedAddress.name }} </span>
                        <span>{{ checkedAddress.tel }} </span>
                    </div>
                    <div>
                        {{ checkedAddress.addressDetail }}
                    </div>
                </div>
            </van-cell>
        </van-cell-group>

        <!--  <van-cell-group>-->
        <!--    <van-cell class="order-coupon" title="优惠券" is-link :value="getCouponValue()" @click="getCoupons" />-->
        <!--  </van-cell-group>-->

        <!-- 优惠券列表 -->
        <!--<van-popup v-model="showList" position="bottom">-->
        <!--  <van-coupon-list-->
        <!--    :coupons="coupons"-->
        <!--    :chosen-coupon="chosenCoupon"-->
        <!--    :disabled-coupons="disabledCoupons"-->
        <!--    @change="onChange"-->
        <!--    @exchange="onExchange"-->
        <!--  />-->
        <!--</van-popup>-->

        <div v-for="item in checkedGoodsList" :key="item.id" style="display: flex; background-color: #fff;padding:10px; margin-top:1px;">
            <div style="width: 80px; height: 80px;">
                <img :src="item.picUrl" style="width: 100%"/>
            </div>
            <div style="padding: 0 0 0 10px;flex:1">
                <div style="font-size: 14px; color: #000;font-weight: bold;height:38px;">{{item.goodsName}}</div>
                <div style="color:#aaa;">
                    <span style="margin-right:6px;font-size: 12px;" v-for="(spec, index) in item.specifications" :key="index">
                        {{spec}}
                    </span>
                </div>
                <div style="margin-top:5px;">
                    <span style="font-size: 10px;color: #E86489;">￥</span>
                    <span style="font-size: 15px;color: #E86489;">{{item.price}}</span>
                    <span style="font-size: 15px;color: #E86489;" v-if="item.modelPrice">+{{item.modelPrice}}<span style="font-size:11px;"> 模豆</span></span>
                    <span style="font-size: 12px;color:#aaa;float:right;">×{{item.number}}</span>
                </div>
            </div>
        </div>

        <div style="height:5px;"></div>
        <van-cell-group>
            <van-cell>
                <div style="display: flex;line-height:24px;font-size:13px;">
                    <div style="flex:1;">
                        <strong style="font-size: 15px;">配送服务</strong>
                        <div style="color:#aaa;">中小件送货时间</div>
                    </div>
                    <div style="text-align: right">
                        <p>快递运输</p>
                        <div style="color:#aaa;">
                            工作日、双休日与节假日均可送货
                        </div>
                    </div>
                </div>
            </van-cell>
            <van-cell>
                <div style="display: flex;line-height:24px;font-size:13px;">
                    <strong style="font-size: 15px;">退换无忧</strong>
                    <div style="color:#aaa;flex:1;padding-left:5px;">退换货可获得一次运费赔付</div>
                    <div style="color:#E86489">商家赠送</div>
                </div>
            </van-cell>
            <van-field v-model="message" placeholder="请输入备注">
                <template slot="label"><strong style="font-size: 15px;">订单备注</strong></template>
                <template slot="icon">{{message.length}}/50</template>
            </van-field>
        </van-cell-group>
        <div style="height:5px;"></div>

        <van-cell-group>
            <van-cell title="商品金额">
                <span class="red">{{goodsTotalPrice * 100 | yuan}}</span>
            </van-cell>
            <van-cell title="邮费">
                <span class="red">{{ freightPrice * 100| yuan}}</span>
            </van-cell>
            <van-cell title="模豆">
                <span class="red">{{ modelTotalPrice }}</span>
            </van-cell>
            <!--      <van-cell title="优惠券">-->
            <!--        <span class="red">-{{ couponPrice * 100| yuan}}</span>-->
            <!--      </van-cell>-->

        </van-cell-group>
        <div style="height: 20px;"></div>

        <van-submit-bar
                :price="actualPrice*100"
                label="总计："
                buttonText="提交订单"
                :disabled="isDisabled"
                @submit="onSubmit"
        />
    </div>
</template>

<script>
    import {Card, Tag, ard, Field, SubmitBar, Toast} from 'vant';
    import {CouponCell, CouponList, Popup} from 'vant';
    import {cartCheckout, orderSubmit, couponSelectList} from '@/api/api';
    import {getLocalStorage, setLocalStorage} from '@/utils/local-storage';
    import dayjs from 'dayjs';

    export default {
        name: 'getaddress',
        data() {
            return {
                checkedGoodsList: [],
                checkedAddress: {},
                availableCouponLength: 0, // 可用的优惠券数量
                goodsTotalPrice: 0, //商品总价
                modelTotalPrice: 0,
                freightPrice: 0, //快递费
                couponPrice: 0, //优惠券的价格
                grouponPrice: 0, //团购优惠价格
                orderTotalPrice: 0, //订单总价
                actualPrice: 0, //实际需要支付的总价
                message: '',

                isDisabled: false,
                showList: false,
                chosenCoupon: -1,
                coupons: [],
                disabledCoupons: []
            };
        },
        created() {
            this.init();
        },

        methods: {
            onSubmit() {
                const {AddressId, CartId, CouponId} = getLocalStorage('AddressId', 'CartId', 'CouponId');

                if (AddressId === null || !AddressId || AddressId == '0') {
                    Toast.fail('请设置收货地址');
                    return;
                }else if(!CartId || CartId == '0'){
                    // Toast.fail('提交的数据无效');
                    // return;
                }

                this.isDisabled = true;

                orderSubmit({
                    addressId: AddressId,
                    cartId: CartId,
                    couponId: CouponId,
                    grouponLinkId: 0,
                    grouponRulesId: 0,
                    message: this.message
                }).then(res => {
                    // 下单成功，重置下单参数
                    setLocalStorage({AddressId: 0, CartId: 0, CouponId: 0});

                    let orderId = res.data.data.orderId;
                    this.$router.push({
                        name: 'payment',
                        params: {orderId: orderId}
                    });
                }).catch((error) => {
                    if(error.data && error.data.errmsg){
                        this.$toast(error.data.errmsg);
                    }else{
                        this.$toast("下单失败");
                    }
                    this.isDisabled = false;
                })
            },
            goAddressList() {
                this.$router.push({
                    path: '/user/address'
                });
            },
            // getCouponValue() {
            //   if(this.couponPrice !== 0 ){
            //     return "-¥" + this.couponPrice + ".00元"
            //   }
            //   if(this.availableCouponLength !== 0){
            //     return this.availableCouponLength + "张可用"
            //   }
            //   return '没有可用优惠券'
            // },
            // getCoupons() {
            //   const {AddressId, CartId, CouponId} = getLocalStorage('AddressId', 'CartId', 'CouponId');
            //   couponSelectList({cartId: CartId, grouponRulesId: 0}).then(res => {
            //     var cList = res.data.data
            //     this.coupons = []
            //     for(var i = 0; i < cList.length; i++){
            //       var c = cList[i]
            //
            //       var coupon = {
            //         id: c.id,
            //         name: c.name,
            //         condition: c.min,
            //         value: c.discount * 100,
            //         description: c.desc,
            //         startAt: new Date(c.startTime).getTime()/1000,
            //         endAt: new Date(c.endTime).getTime()/1000,
            //         valueDesc: c.discount,
            //         unitDesc: '元'
            //       }
            //       this.coupons.push(coupon)
            //
            //       if(c.id === this.couponId){
            //         this.chosenCoupon = i;
            //         break;
            //       }
            //     }
            //
            //     this.showList = true
            //   })
            // },
            init() {
                const {AddressId, CartId, CouponId} = getLocalStorage('AddressId', 'CartId', 'CouponId');

                cartCheckout({
                    cartId: CartId,
                    addressId: AddressId,
                    couponId: CouponId,
                    grouponRulesId: 0
                }).then(res => {
                    const data = res.data.data
                    this.checkedGoodsList = data.checkedGoodsList;
                    this.checkedAddress = data.checkedAddress;
                    this.availableCouponLength = data.availableCouponLength;
                    this.actualPrice = data.actualPrice;
                    this.couponPrice = data.couponPrice;
                    this.grouponPrice = data.grouponPrice;
                    this.freightPrice = data.freightPrice;
                    this.goodsTotalPrice = data.goodsTotalPrice;
                    this.orderTotalPrice = data.orderTotalPrice;
                    let modelTotalPrice = 0;
                    for(const i in this.checkedGoodsList){
                        if(this.checkedGoodsList[i].modelPrice){
                            modelTotalPrice = modelTotalPrice + parseInt(this.checkedGoodsList[i].modelPrice) * this.checkedGoodsList[i].number;
                        }
                    }
                    this.modelTotalPrice = modelTotalPrice;

                    setLocalStorage({AddressId: data.addressId, CartId: data.cartId, CouponId: data.couponId});
                });

            },
            onChange(index) {
                this.showList = false;
                this.chosenCoupon = index;

                if (index === -1) {
                    setLocalStorage({CouponId: -1});
                } else {
                    const couponId = this.coupons[index].id;
                    setLocalStorage({CouponId: couponId});
                }

                this.init()
            },
            // onExchange() {
            //   this.$toast("兑换暂不支持");
            // }
        },

        components: {
            [Toast.name]: Toast,
            [SubmitBar.name]: SubmitBar,
            [Card.name]: Card,
            [Field.name]: Field,
            [Tag.name]: Field,
            [CouponCell.name]: CouponCell,
            [CouponList.name]: CouponList,
            [Popup.name]: Popup
        }
    };
</script>


<style lang="scss" scoped>
    .order-coupon {
        margin-top: 10px;
    }
</style>